{
 "cells": [
  {
   "cell_type": "markdown",
   "id": "3d69cc2f",
   "metadata": {},
   "source": [
    "week12  \n",
    "* 可视化web输出"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "id": "d7e7e2f3",
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "Requirement already satisfied: pyecharts in e:\\python311\\lib\\site-packages (2.0.3)\n",
      "Requirement already satisfied: jinja2 in e:\\python311\\lib\\site-packages (from pyecharts) (3.1.2)\n",
      "Requirement already satisfied: prettytable in e:\\python311\\lib\\site-packages (from pyecharts) (3.7.0)\n",
      "Requirement already satisfied: simplejson in e:\\python311\\lib\\site-packages (from pyecharts) (3.19.1)\n",
      "Requirement already satisfied: MarkupSafe>=2.0 in e:\\python311\\lib\\site-packages (from jinja2->pyecharts) (2.1.2)\n",
      "Requirement already satisfied: wcwidth in e:\\python311\\lib\\site-packages (from prettytable->pyecharts) (0.2.6)\n"
     ]
    }
   ],
   "source": [
    "!pip install pyecharts"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "id": "ec9763b4",
   "metadata": {},
   "outputs": [
    {
     "ename": "ImportError",
     "evalue": "cannot import name 'Markup' from 'jinja2' (E:\\Python311\\Lib\\site-packages\\jinja2\\__init__.py)",
     "output_type": "error",
     "traceback": [
      "\u001b[1;31m---------------------------------------------------------------------------\u001b[0m",
      "\u001b[1;31mImportError\u001b[0m                               Traceback (most recent call last)",
      "Cell \u001b[1;32mIn[3], line 2\u001b[0m\n\u001b[0;32m      1\u001b[0m \u001b[38;5;28;01mfrom\u001b[39;00m \u001b[38;5;21;01mflask\u001b[39;00m \u001b[38;5;28;01mimport\u001b[39;00m Flask \u001b[38;5;66;03m# python 后端与 前端连接的一个框架\u001b[39;00m\n\u001b[1;32m----> 2\u001b[0m \u001b[38;5;28;01mfrom\u001b[39;00m \u001b[38;5;21;01mjinja2\u001b[39;00m \u001b[38;5;28;01mimport\u001b[39;00m Markup, Environment, FileSystemLoader \u001b[38;5;66;03m# Jinja2 前端页面展示的框架\u001b[39;00m\n\u001b[0;32m      3\u001b[0m \u001b[38;5;28;01mfrom\u001b[39;00m \u001b[38;5;21;01mpyecharts\u001b[39;00m\u001b[38;5;21;01m.\u001b[39;00m\u001b[38;5;21;01mglobals\u001b[39;00m \u001b[38;5;28;01mimport\u001b[39;00m CurrentConfig \u001b[38;5;66;03m# pyecharts : A Python Echarts Plotting Library\u001b[39;00m\n\u001b[0;32m      6\u001b[0m CurrentConfig\u001b[38;5;241m.\u001b[39mGLOBAL_ENV \u001b[38;5;241m=\u001b[39m Environment(loader\u001b[38;5;241m=\u001b[39mFileSystemLoader(\u001b[38;5;124m\"\u001b[39m\u001b[38;5;124m./templates\u001b[39m\u001b[38;5;124m\"\u001b[39m))\n",
      "\u001b[1;31mImportError\u001b[0m: cannot import name 'Markup' from 'jinja2' (E:\\Python311\\Lib\\site-packages\\jinja2\\__init__.py)"
     ]
    }
   ],
   "source": [
    "from flask import Flask # python 后端与 前端连接的一个框架\n",
    "from jinja2 import Markup, Environment, FileSystemLoader # Jinja2 前端页面展示的框架\n",
    "from pyecharts.globals import CurrentConfig # pyecharts : A Python Echarts Plotting Library\n",
    "\n",
    "\n",
    "CurrentConfig.GLOBAL_ENV = Environment(loader=FileSystemLoader(\"./templates\"))\n",
    "# pyecharts 模板 需要在github下载templates的模板文件\n",
    "\n",
    "from pyecharts import options as opts\n",
    "# options 图表的配置项 graph\n",
    "\n",
    "from pyecharts.charts import Bar\n",
    "# Bar 柱状图 pyecharts 封装好的图形，可参见 gallery 示例\n",
    "\n",
    "from pyecharts.charts import Geo\n",
    "from pyecharts.globals import ChartType, SymbolType\n",
    "\n",
    "app = Flask(__name__, static_folder=\"templates\")\n",
    "\n",
    "\n",
    "# 1. 找到合适的可视化图表，找到gallery示例代码，测试一下示例代码，\n",
    "# 2. 准备数据分析结果的参数，替换示例代码的参数\n",
    "# 3. 创建制作图的函数\n",
    "def bar_base() -> Bar:\n",
    "    c = (\n",
    "        Bar()\n",
    "        .add_xaxis([\"衬衫\", \"羊毛衫\", \"雪纺衫\", \"裤子\", \"高跟鞋\", \"袜子\"])\n",
    "        .add_yaxis(\"商家A\", [5, 20, 36, 10, 75, 90])\n",
    "        .add_yaxis(\"商家B\", [15, 25, 16, 55, 48, 8])\n",
    "        .set_global_opts(title_opts=opts.TitleOpts(title=\"Bar-基本示例\", subtitle=\"我是副标题\"))\n",
    "    )\n",
    "    return c\n",
    "\n",
    "def geo_lines():\n",
    "    c = (\n",
    "        Geo()\n",
    "        .add_schema(maptype=\"china\")\n",
    "        .add(\n",
    "            \"\",\n",
    "            [(\"广州\", 55), (\"北京\", 66), (\"杭州\", 77), (\"重庆\", 88)],\n",
    "            type_=ChartType.EFFECT_SCATTER,\n",
    "            color=\"white\",\n",
    "        )\n",
    "        .add(\n",
    "            \"geo\",\n",
    "            [(\"广州\", \"上海\"), (\"广州\", \"北京\"), (\"广州\", \"杭州\"), (\"广州\", \"重庆\")],\n",
    "            type_=ChartType.LINES,\n",
    "            effect_opts=opts.EffectOpts(\n",
    "                symbol=SymbolType.ARROW, symbol_size=6, color=\"blue\"\n",
    "            ),\n",
    "            linestyle_opts=opts.LineStyleOpts(curve=0.2),\n",
    "        )\n",
    "        .set_series_opts(label_opts=opts.LabelOpts(is_show=False))\n",
    "        .set_global_opts(title_opts=opts.TitleOpts(title=\"Geo-Lines\"))\n",
    "    )\n",
    "    return c\n",
    "\n",
    "# 4. 将可视化图形通过markup方法，绘制在HTML的页面上\n",
    "@app.route(\"/\")\n",
    "def index():\n",
    "    c = geo_lines()\n",
    "    return Markup(c.render_embed())\n",
    "\n",
    "\n",
    "if __name__ == \"__main__\":\n",
    "    app.run()"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "3ee6a774",
   "metadata": {},
   "source": [
    "# 1.Flask 数据可视化详解"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "11e70817",
   "metadata": {},
   "outputs": [],
   "source": [
    "from flask import Flask # python后端与前端连接地一个框架\n",
    "from jinja2 .utils import markupsafe # jinja2前端页面展示都得框架\n",
    "from pyecharts.globals import CurrentConfig # pyecharts：A python Echarts Plotting Library\n",
    "\n",
    "# pyecharts 模板需要在gitub下载templates的模板文件\n",
    "\n",
    "from pyecharts import options as opts # options图表的配置项graph\n",
    "from pyecharts.charts import Bar # Bar柱状图pyecharts封装好的图形，可参见gallery示例\n",
    "app = Flask(__name__, static_folder=\"templates\")\n",
    "\n",
    "# 找到合适的可视化图表，找到gallery示例代码，测试一下示例代码\n",
    "# 准备数据分析结果的参数，替换示例代码的参数\n",
    "# 创建制作图的函数\n",
    "def bar_base() -> Bar:\n",
    "    c = (\n",
    "        Bar()\n",
    "        .add_xaxis([\"衬衫\", \"羊毛衫\", \"雪纺衫\", \"裤子\", \"高跟鞋\", \"袜子\"])\n",
    "        .add_yaxis(\"商家A\", [5, 20, 36, 10, 75, 90])\n",
    "        .add_yaxis(\"商家B\", [15, 25, 16, 55, 48, 8])\n",
    "        .set_global_opts(title_opts=opts.TitleOpts(title=\"Bar-基本示例\", subtitle=\"我是副标题\"))\n",
    "    )\n",
    "    return c\n",
    "# 将可视化图形通过markup方法，绘制在HTML的页面上\n",
    "@app.route(\"/\")\n",
    "def index():\n",
    "    c = bar_base()\n",
    "    return markupsafe.Markup(c.render_embed())\n",
    "\n",
    "\n",
    "if __name__ == \"__main__\":\n",
    "    app.run()\n",
    "\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "08a5edad",
   "metadata": {},
   "outputs": [],
   "source": [
    "from flask import Flask # python 后端与 前端连接的一个框架\n",
    "from jinja2 import Markup, Environment, FileSystemLoader # Jinja2 前端页面展示的框架\n",
    "from pyecharts.globals import CurrentConfig # pyecharts : A Python Echarts Plotting Library\n",
    "\n",
    "\n",
    "CurrentConfig.GLOBAL_ENV = Environment(loader=FileSystemLoader(\"./templates\"))\n",
    "# pyecharts 模板 需要在github下载templates的模板文件\n",
    "\n",
    "from pyecharts import options as opts\n",
    "# options 图表的配置项 graph\n",
    "\n",
    "from pyecharts.charts import Bar\n",
    "# Bar 柱状图 pyecharts 封装好的图形，可参见 gallery 示例\n",
    "\n",
    "from pyecharts.charts import Geo\n",
    "from pyecharts.globals import ChartType, SymbolType\n",
    "\n",
    "app = Flask(__name__, static_folder=\"templates\")\n",
    "\n",
    "\n",
    "# 1. 找到合适的可视化图表，找到gallery示例代码，测试一下示例代码，\n",
    "# 2. 准备数据分析结果的参数，替换示例代码的参数\n",
    "# 3. 创建制作图的函数\n",
    "def bar_base() -> Bar:\n",
    "    c = (\n",
    "        Bar()\n",
    "        .add_xaxis([\"衬衫\", \"羊毛衫\", \"雪纺衫\", \"裤子\", \"高跟鞋\", \"袜子\"])\n",
    "        .add_yaxis(\"商家A\", [5, 20, 36, 10, 75, 90])\n",
    "        .add_yaxis(\"商家B\", [15, 25, 16, 55, 48, 8])\n",
    "        .set_global_opts(title_opts=opts.TitleOpts(title=\"Bar-基本示例\", subtitle=\"我是副标题\"))\n",
    "    )\n",
    "    return c\n",
    "\n",
    "def geo_lines():\n",
    "    c = (\n",
    "        Geo()\n",
    "        .add_schema(maptype=\"china\")\n",
    "        .add(\n",
    "            \"\",\n",
    "            [(\"广州\", 55), (\"北京\", 66), (\"杭州\", 77), (\"重庆\", 88)],\n",
    "            type_=ChartType.EFFECT_SCATTER,\n",
    "            color=\"white\",\n",
    "        )\n",
    "        .add(\n",
    "            \"geo\",\n",
    "            [(\"广州\", \"上海\"), (\"广州\", \"北京\"), (\"广州\", \"杭州\"), (\"广州\", \"重庆\")],\n",
    "            type_=ChartType.LINES,\n",
    "            effect_opts=opts.EffectOpts(\n",
    "                symbol=SymbolType.ARROW, symbol_size=6, color=\"blue\"\n",
    "            ),\n",
    "            linestyle_opts=opts.LineStyleOpts(curve=0.2),\n",
    "        )\n",
    "        .set_series_opts(label_opts=opts.LabelOpts(is_show=False))\n",
    "        .set_global_opts(title_opts=opts.TitleOpts(title=\"Geo-Lines\"))\n",
    "    )\n",
    "    return c\n",
    "\n",
    "# 4. 将可视化图形通过markup方法，绘制在HTML的页面上\n",
    "@app.route(\"/\")\n",
    "def index():\n",
    "    c = geo_lines()\n",
    "    return Markup(c.render_embed())\n",
    "\n",
    "\n",
    "if __name__ == \"__main__\":\n",
    "    app.run()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "602eb872",
   "metadata": {},
   "outputs": [],
   "source": [
    "from flask import Flask # python后端与前端连接地一个框架\n",
    "from jinja2 .utils import markupsafe  # jinja2前端页面展示的框架\n",
    "from pyecharts.globals import CurrentConfig # pyecharts：A python Echarts Plotting Library\n",
    "\n",
    "from pyecharts import options as opts # options图表的配置项graph\n",
    "from pyecharts.charts import Bar # Bar柱状图pyecharts封装好的图形，可参见gallery示例\n",
    "app = Flask(__name__, static_folder=\"templates\")\n",
    "\n",
    "# 找到合适的可视化图表，找到gallery示例代码，测试一下示例代码\n",
    "# 准备数据分析结果的参数，替换示例代码的参数\n",
    "# 创建制作图的函数\n",
    "def bar_base() -> Bar:\n",
    "    c = (\n",
    "        Bar()\n",
    "        .add_xaxis([\"衬衫\", \"羊毛衫\", \"雪纺衫\", \"裤子\", \"高跟鞋\", \"袜子\"])\n",
    "        .add_yaxis(\"商家A\", [5, 20, 36, 10, 75, 90])\n",
    "        .add_yaxis(\"商家B\", [15, 25, 16, 55, 48, 8])\n",
    "        .set_global_opts(title_opts=opts.TitleOpts(title=\"Bar-基本示例\", subtitle=\"我是副标题\"))\n",
    "    )\n",
    "    return c\n",
    "def geo_lines():\n",
    "    c = (\n",
    "    Geo()\n",
    "    .add_schema(\n",
    "        maptype=\"china\",\n",
    "        itemstyle_opts=opts.ItemStyleOpts(color=\"#323c48\", border_color=\"#111\"),\n",
    "    )\n",
    "    .add(\n",
    "        \"\",\n",
    "        [(\"广州\", 55), (\"北京\", 66), (\"杭州\", 77), (\"重庆\", 88)],\n",
    "        type_=ChartType.EFFECT_SCATTER,\n",
    "        color=\"white\",\n",
    "    )\n",
    "    .add(\n",
    "        \"geo\",\n",
    "        [(\"广州\", \"上海\"), (\"广州\", \"北京\"), (\"广州\", \"杭州\"), (\"广州\", \"重庆\")],\n",
    "        type_=ChartType.LINES,\n",
    "        effect_opts=opts.EffectOpts(\n",
    "            symbol=SymbolType.ARROW, symbol_size=6, color=\"blue\"\n",
    "        ),\n",
    "        linestyle_opts=opts.LineStyleOpts(curve=0.2),\n",
    "    )\n",
    "    .set_series_opts(label_opts=opts.LabelOpts(is_show=False))\n",
    "    .set_global_opts(title_opts=opts.TitleOpts(title=\"Geo-Lines-background\"))\n",
    ")\n",
    "    return c\n",
    "# 将可视化图形通过markup方法，绘制在HTML的页面上\n",
    "@app.route(\"/\")\n",
    "def index():\n",
    "    c = bar_base()\n",
    "    return markupsafe.Markup(c.render_embed())\n",
    "\n",
    "\n",
    "if __name__ == \"__main__\":\n",
    "    app.run()"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "4a15beb4",
   "metadata": {},
   "source": [
    "# 2."
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3 (ipykernel)",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.11.0"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 5
}
